Revision:
<div id="grid-alpha">
<section id="row-one"><div>1</div></section>
<section id="row-two"><div>1</div><div>2</div></section>
<section id="row-three"><div>1</div><div>2</div><div>3</div></section>
<section id="row-four"><div>1</div><div>2</div><div>3</div><div>4</div></section>
<section id="row-five"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></section>
<section id="row-six"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></section>
<section id="row-seven"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div></section>
<section id="row-eight"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></section>
<section id="row-nine"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></section>
<section id="row-ten"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div></section>
<section id="row-eleven"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div></section>
<section id="row-twelve"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></section>
</div>
<div id="grid-beta">
<section id="row-a"><div class="col-a">a</div><div class="col-b">b</div></section>
<section id="row-b"><div class="col-a">a</div><div class="col-b">b</div></section>
<section id="row-c"><div class="col-a">a</div><div class="col-b">b</div></section>
<section id="row-d"><div class="col-a">a</div><div class="col-b">b</div></section>
<section id="row-e"><div class="col-a">a</div><div class="col-b">b</div></section>
<section id="row-f"><div class="col-a">a</div><div class="col-b">b</div></section>
<section id="row-g"><div class="col-a">a</div><div class="col-b">b</div></section>
<section id="row-h"><div class="col-a">a</div><div class="col-b">b</div></section>
<section id="row-i"><div class="col-a">a</div><div class="col-b">b</div></section>
<section id="row-j"><div class="col-a">a</div><div class="col-b">b</div></section>
<section id="row-k"><div class="col-a">a</div><div class="col-b">b</div></section>
</div>
<style>
html {box-sizing: border-box; font-size: 100%; background-image: repeating-linear-gradient(135deg, orange, silver, darkgreen);}
*, *:before, *:after {box-sizing: inherit;}
body {background: transparent; font-family: 'Open Sans', sans-serif; font-size: 1.2vw;padding: 0; margin: 0;}
.main-title {background: silver; border-bottom: 0.2vw solid #666; border-top: 0.2vw solid #666; margin-bottom: 0.5vw; margin-top: 0.5vw;}
h1 {font-weight: 600; font-size: 3vw; line-height: 0.8; text-align: center; color: #888}
h2{font-size: 2vw; color: darkgreen; display: flex; justify-content: start; text-decoration-line:overline underline;}
#grid-alpha, #grid-beta{grid-template-columns: repeat(12, 1fr); grid-template-rows: minmax(2vh, auto); gap: 1vw; width: 96vw; height: auto; font-size: 2vw;}
#grid-alpha section, #grid-beta section{margin-left: 1vw; text-align: center;margin-bottom: 1vw; font-weight: bold; }
#grid-alpha section, #grid-beta section{display: grid; grid-auto-flow: column dense;}
div:not(#grid, #grid-2){border: 0.2vw solid darkgreen; border-collapse: collapse;}
#row-one{grid-column:1/13; grid-row:1/2;animation: blink 3s linear infinite;}
#row-two{grid-column:1/13; grid-row:2/3;animation: blink 4s linear infinite;}
#row-three{grid-column:1/13; grid-row:3/4;animation: blink 5s linear infinite;}
#row-four{grid-column:1/13; grid-row:4/5;animation: blink 6s linear infinite;}
#row-five{grid-column:1/13; grid-row:5/6;animation: blink 7s linear infinite;}
#row-six{grid-column:1/13; grid-row:6/7;animation: blink 8s linear infinite;}
#row-seven{grid-column:1/13; grid-row:7/8;animation: blink 9s linear infinite;}
#row-eight{grid-column:1/13; grid-row:8/9;animation: blink 10s linear infinite;}
#row-nine{grid-column:1/13; grid-row:9/10;;animation: blink 11s linear infinite;}
#row-ten{grid-column:1/13; grid-row:10/11;;animation: blink 12s linear infinite;}
#row-eleven{grid-column:1/13; grid-row:11/12;animation: blink 13s linear infinite;}
#row-twelve{grid-column:1/13; grid-row:12/13;animation: blink 14s linear infinite;}
#row-a{grid-template-columns: 1fr 11fr;animation: flikker 1s linear infinite;}
#row-b{grid-template-columns: 2fr 10fr;animation: flikker 2s linear infinite;}
#row-c{grid-template-columns: 3fr 9fr;animation: flikker 3s linear infinite;}
#row-d{grid-template-columns: 4fr 8fr;animation: flikker 4s linear infinite;}
#row-e{grid-template-columns: 5fr 7fr;animation: flikker 5s linear infinite;}
#row-f{grid-template-columns: 6fr 6fr;animation: flikker 6s linear infinite;}
#row-g{grid-template-columns: 7fr 5fr;animation: flikker 7s linear infinite;}
#row-h{grid-template-columns: 8fr 4fr;animation: flikker 8s linear infinite;}
#row-i{grid-template-columns: 9fr 3fr;animation: flikker 9s linear infinite;}
#row-j{grid-template-columns: 10fr 2fr;animation: flikker 10s linear infinite;}
#row-k{grid-template-columns: 11fr 1fr;animation: flikker 11s linear infinite;}
@keyframes blink{
0%, 100%{background-image:repeating-linear-gradient(darkblue, silver, seagreen);}
50%{background-image:repeating-linear-gradient(green, orange,skyblue);}
}
@keyframes flikker{
0%, 100%{background-image:repeating-radial-gradient(farthest-corner at 10%, darkblue, silver, seagreen);}
50%{background-image:repeating-radial-gradient(farthest-corner at 10%, green, orange,skyblue);}
}
</style>